<template>
  <div>
    <div class="admin_main">
      <slot></slot>
      <div class="admin_content" >
        <div class="auto-res label-edit">
          <div class="auto-left">
            <el-radio v-model="form.autoResend" label="1">关闭</el-radio>
            <br>
            <el-radio v-model="form.autoResend" label="0">开启（在以下时间段内启用）</el-radio>
            <div class="time-line">
              <span>开始时间</span>
              <el-date-picker class="datepicker" size="small"
                              v-model="form.resendStartTime" value-format="yyyy-MM-dd HH:mm:ss"
                              type="datetime" :clearable="false" :picker-options="pickerOptions"
                              placeholder="选择日期">
              </el-date-picker>
            </div>
            <div class="time-line">
              <span>结束时间</span>
              <el-date-picker class="datepicker" size="small"
                              v-model="form.resendEndTime" value-format="yyyy-MM-dd HH:mm:ss"
                              type="datetime" :clearable="false" :picker-options="pickerOptions"
                              placeholder="选择日期">
              </el-date-picker>
            </div>
            <!-- 富文本编辑器-->
            <div class="my-edit">
              <Editor ref="childEdit" :height="420" :catchData="getContent"
                      :htmlContent="form.resendContentHtml"></Editor>
            </div>
            <div class="btn">
              <el-button size="small" @click="saveContent">保存</el-button>
              <el-button size="small" @click="$router.go(-1)">取消</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    import {query, update} from "@/api/mail/admin/mail-general";

    import Editor from '@/components/ueditor/index'

    export default {
        name: "Mail-genera",
        components: {
            Editor
        },
        data() {
            return {
                form: {
                    defaultFont: '1',
                    defaultFontSize: '',
                    defaultFontColor: '#666666',
                    emailPageSize: 10,
                    resendContentHtml: '',
                    resendStartTime: '',
                    resendEndTime: '',
                    autoResend: '1',
                },
                fontOptions: ['微软雅黑'],
                sizeOptions: [12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26],
                content: '',
                options: [],
                pickerOptions: {
                    disabledDate: time => {
                        return time.getTime() < Date.now() - 8.64e7
                    }

                },
                predefineColors: ['#000000', '#BE5957', '#DA762F', '#139891', '#4A669F', '#595AC1', '#333333', '#E63C38', '#EC994D', '#5DBD7F', '#5B87ED', '#8D50BF', '#7B8291', '#F07A79', '#E3AE02', '#7EC65E', '#45A7EE', '#ACACAC'],
            }
        },
        mounted() {
            this.getData()
        },
        methods: {
            getData() {
                query().then(res => {
                    if (JSON.stringify(res.data.data) != '{}') {
                        this.form = res.data.data;
                        this.form.autoResend = this.form.autoResend.toString()
                        this.$refs.childEdit.getInit(this.form.resendContentHtml);
                    }
                }).catch(err => {
                    console.log(err)
                });
            },
            saveContent() { //编辑或新增
                this.$confirm("保存所做的修改?", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "success"
                }).then(() => {
                    update(this.form).then(res => {
                        this.$message({type: "success", message: res.data.msg});
                        this.$refs.childEdit.reset();
                        this.reset();
                        this.getData();
                    }).catch(err => {
                        console.log(err)
                    });
                })
            },
            reset() {
                this.form = {
                    defaultFont: '1',
                    defaultFontSize: '',
                    defaultFontColor: '#2A97F9',
                    emailPageSize: 10,
                    resendContentHtml: '',
                    resendStartTime: '',
                    resendEndTime: '',
                    autoResend: '1',
                }
            },
            //获取富文本内容
            getContent(content) {
                this.form.resendContentHtml = encodeURIComponent(content);
            }
        }
    }
</script>

<style lang="scss" scoped>
  $normalSize: 14px;
  .admin_main {
    background: rgba(234, 240, 246, 1);

    .my-edit {
      overflow: hidden;
      border-bottom: 1px solid #ddd;
    }

    h1.title {
      width: 100%;
      color: #2A97F9;
      font-size: $normalSize;
      font-weight: normal;
      line-height: 35px;
      padding-left: 30px;
      border-radius: 5px;
      margin: 0;
    }
  }

  label.el-radio {
    max-width: 300px;
  }

  .admin_content {
    padding: 30px 2%;
    width: 96%;
    background-color: #fff;

    .title {
      width: 96%;
      background-color: #EAF0F6;
      color: #409EFF;
      height: 35px;
      line-height: 35px;
      padding-left: 30px;
    }

    .btn {
      margin: 15px 0;

      button.el-button.el-button--default.el-button--small {
        font-size: $normalSize;
        width: 80px;
        line-height: 33px;
        color: #2A97F9;
        border: 0;
        padding: 0;
        background: rgba(233, 243, 253, 1);
        border-radius: 5px;
      }

      button.el-button.el-button--default.el-button--small:last-child {
        background: rgba(243, 243, 243, 1);
        color: #666;
      }
    }

    .label-title {
      display: flex;
      margin-bottom: 20px;

      button.el-button.el-button--default.el-button--small {
        width: 90px;
        font-size: $normalSize;
        color: #2A97F9;
        padding: 0;
        background: rgba(233, 243, 253, 1);
        border-radius: 5px;
        line-height: 32px;
        border: 0;
      }

      ul {
        display: flex;

        li {
          width: 90px;
          line-height: 32px;
          background: rgba(243, 243, 243, 1);
          border-radius: 5px;
          font-size: $normalSize;
          color: #000;
          text-align: center;
          margin-left: 20px;
        }
      }

    }

    .lable_color {
      color: #409EFF;
      margin-left: 10px;
    }

    .label-edit {

      .edit-btn {
        text-align: right;
        margin: 5px;

        button.el-button.el-button--default.el-button--small {
          font-size: $normalSize;
          width: 85px;
          line-height: 35px;
          color: #2A97F9;
          border: 0;
          padding: 0;
          background: rgba(233, 243, 253, 1);
          border-radius: 5px;
        }

        button.el-button.el-button--default.el-button--small:last-child {
          background: rgba(243, 243, 243, 1);
          color: #000;
        }
      }

      .auto-left{
        padding-left: 8px;
      }
      .edit-left {
        border: 1px solid #ddd;
        border-radius: 5px;
      }
      .el-select {
        margin-left: 10px;
      }

      h2 {
        color: #000;
        margin-bottom: 10px;
        font-weight: 600;
      }

      .select_item {
        margin-bottom: 10px;

        .el-select {
          width: 190px;
        }
      }
    }

    .auto-res {
      .auto-left {
        border: 0;

        .el-radio {
          margin-bottom: 15px;
        }
      }
      .time-line {
        display: flex;
        align-items: center;
        margin-bottom: 15px;
        padding-left: 5px;

        span {
          color: #000;
          font-size: $normalSize;
          margin-right: 10px;
        }

        input.el-input__inner {
          height: 33px;
          line-height: 33px;
        }
      }

    }

  }
</style>
